<template>
 <div id="home">
     <!-- 这里我要往里面插入东西 所以注意不要使用单标签 --> 
     <nav-bar class="home-nav">
         <template v-slot:center>
             <div>购物街</div>        
         </template>
     </nav-bar>

     <tab-control class="tab-control" 
        :titles="['男歌手','女歌手','乐队']"
        @tabClick="tabClick"
        ref="tabControl1"
        v-show="isTabFixed"
        ></tab-control>

    <scroll class="content" 
            ref="scroll" 
            :probe-type="3" 
            @scroll="contentScroll"
            :pull-up-load="true"
            @pullingUp="loadMore">
        <!-- 轮播 -->
        <home-swiper :PicturesOfMusic="PicturesOfMusic" @swipperImageLoad="swipperImageLoad" />
        <!-- 视图 -->
        <recommend-view :RecommendView="RecommendView" @recommendImageLoad="recommendImageLoad" />
        <!-- 这里是一个静态图片，点击跳转到API文档 -->
        <feature-view />
        <!-- 小导航 -->
        <tab-control
        :titles="['男歌手','女歌手','乐队']"
        @tabClick="tabClick"
        ref="tabControl2"
        ></tab-control>
        
        <!-- 内容展示 -->
        <goods-list :goods="goods[currentItem].list" />
    </scroll>

    <!-- 顶部图标 -->
    <!-- @可以直接监听了 ？ 版本问题-->
    <back-top @click="backClick" v-show="isShow"/>
 </div>
</template>

<script>
/* 封装的轮播 */
import HomeSwiper from './childrenHomeComps/HomeSwiper'
/* 封装的视图 */
import RecommendView from './childrenHomeComps/RecommendView'
/* API a标签 */
import FeatureView from './childrenHomeComps/FeatureView'


import NavBar from '@components/common/navbar/NavBar'
/* 文字导航 （三） */
import TabControl from '@components/content/tabControl/TabControl'
/* 显示数据 */
import GoodsList from '@/components/content/goods/GoodsList'
/* 滚动 */
import Scroll from '@/components/common/better_scroll/Scroll'
/* 图标 */
import BackTop from '@/components/content/backTop/BackTop'

/* 只有default的导出才能不删大括号 拿到数据 */
import {getHomeMultidata,
        getHomeRecommendView,
        getHomeGoods
    } from '@/network/home'

/* 插件 */

export default({
    name:'Home',
    data(){
        return {
           PicturesOfMusic:[],  /* pictures 音乐的图片 banners轮播图*/
           RecommendView:[],    /* 推荐 展示 图片  */
           /* 162集 网易云 - 歌手分类列表 来展示 */
           /* type 1.是男歌手 ，2-女歌手，3-乐队 */
           goods:{
               '1':{offset: 0,list: []},
               '2':{offset: 0,list: []},
               '3':{offset: 0,list: []}
           },
           currentItem:'1',
           isShow:false,
           tabOffsetTop:0, //tabControl 吸顶效果
           isTabFixed:false, //样式是否吸顶
           saveY:0
        }
    },
    components:{
        HomeSwiper,
        RecommendView,
        FeatureView,

        NavBar,
        TabControl,
        GoodsList,
        Scroll,
        BackTop
    },
    created(){
        /* 这里的this是这个组件的this this 看就近 {} */
        /* console.log(this); */
        // 1.请求多个数据
        this.getHomeMultidata()
        this.getHomeRecommendView()
        /* 请求 页面加载页面数据 - 抽取到methods里就可以请求多个数据了，不是吗？ */

          /* 拿到男歌手第一页的 的前30条数据了*/
           /* type 1.是男歌手 ，2-女歌手，3-乐队 */
        this.getHomeGoods(1)
        this.getHomeGoods(2)
        this.getHomeGoods(3)

        //事件总线，监听GoodsListitem.vue中图片加载完成 174
         /* this.$bus.on('itemImageLoad', () => {
             console.log("123")
        })*/
        /* if(this.$store.state.scount == 30){ */
        //setInterval(() => {
           /*  console.log(this.$store.state.ImageLoadNum) */ //没意义了
            // 很不好，这样写 定时器来刷新 没过一秒重新判断一次高度 - 应该是加载一个图片判断一次高度
            //this.$refs.scroll.refresh()
        //}, 1000); 
    },
    mounted(){
         
        // 1.图片加载完成的事件监听 

        
       /*  } */

        //2.获取tabControl的offsetTop
        //所有的组件都有一个属性$el:用于获取组件中的元素
        //需要监听上面的图片是否加载完
       
    },
    methods:{
        /* 事件监听的相关方法  这里上面不用传参*/
        /* 子传父 */
        tabClick(index){
            /* console.log(index) */
            switch(index){
                case 0 :
                    this.currentItem='1'
                break
                case 1 :
                    this.currentItem='2'
                break
                case 2 :
                    this.currentItem='3'
                break
            }
            this.$refs.tabControl1.currentIndex = index;
            this.$refs.tabControl2.currentIndex = index;
        },
        backClick(){
            //BetterScroll 2.0
            this.$refs.scroll.scrollTo(0,0,600)
        },
        contentScroll(position){
            /* 回到顶部 */
            //1.判断BackTop是否显示
            this.isShow = (-position.y) > 1000

            //2.解决tabControl是否吸顶(position:fixed;)
            this.isTabFixed = (-position.y) > this.tabOffsetTop
        },
        loadMore(){
            //就是再调一这个方法改变增加一页
            this.getHomeGoods(this.currentItem)
            console.log("上拉加载了")


            /* better-scroll 每当有一个图片加载的时候content重新计算 使用VueX*/
            this.$refs.scroll.refresh()
        },

        swipperImageLoad(){
             console.log(this.$refs.tabControl2.$el.offsetTop)
             this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
        },
        recommendImageLoad(){
            console.log(this.$refs.tabControl2.$el.offsetTop)
            this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
        },

        /* 防抖操作  175  */
       /*  debouch(func,delay){}, */

        /* 都是网络请求的相关方法 */
        getHomeMultidata(){
            //再methods里面再封装一层，再上面的create里面抽取调用
            getHomeMultidata().then(res => {
              this.PicturesOfMusic=res.data.banners 
            })
        },
        getHomeRecommendView(){
            getHomeRecommendView().then(res => {
              this.RecommendView=res.data.playlists
        })   
        },
        getHomeGoods(type){
            //动态获取数据
            const offset=this.goods[type].offset + 1
            getHomeGoods(type,offset).then(res => {
            /* 将获取的数据存储到list[] 里  这样会被覆盖，不可取*/
            /* this.goods[type].list=res.data.artists */
            this.goods[type].list.push(...res.data.artists)
            this.goods[type].offset += 1
           /*  console.log(res.data.artists); */
           this.$refs.scroll.finishPullUp()
        })    
        }
    }, 
})

</script>

<style scoped>
    #home{
        padding-top: 44px;
        height: 100vh;
        position: relative;
    }
    .home-nav{
        /* 使用上面:root定义的变量  在css/base.css里 */
        background-color: var(--color-tint);
        color: var(--color-background);

        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        z-index: 9;
    }

    /* .tab-control{
        /* 这个属性以后要学习一下 
        position: sticky;
        position: -webkit-sticky;
        top: 44px;
    } */

    .tab-control{
        position: relative;
        z-index: 9;
    } 

    .content{
        overflow: hidden;
        position: absolute;
        top: 44px;
        bottom: 49px;
        left: 0;
        right: 0;
    }

    /* .content{
        height: calc(100% - 93px);
        overflow: hidden;

        margin-top: 44px;
    } */

</style>
